<template>
	<div class="city-list">
		<div class="ul1 comm">
			<p>定位/附近城市</p>
			<ul>
				<li>{{show}}</li>
			</ul>
		</div>
		<div class="ul2 comm">
			<p>热门城市</p>
			<ul>
				<li v-for="item in hotCList" :key="item.code" @click="toHome(item.name)" :class="{'default':show==item.name}">{{item.name}}</li>
			</ul>
		</div>
		<div class="ul3 comm" v-for="(item,index) in cityLsit" :key="index">
				<p>字母{{item.initial}}开头的城市</p>
				<ul>
					<li v-for="key in item.list" :key="key.code" @click="toHome(key.name)" :class="{'default':show==key.name}">{{key.name}}</li>
				</ul>
		</div>
	</div>
</template>

<script>
//引入辅助函数：先引入函数，再调用函数
import {mapMutations } from 'vuex';
export default{
	name:'CitysList',
	data(){
		return{
			hotCList:[],
			cityLsit:[],
			show:'广州'
		}
	},
	mounted(){
		if(localStorage.city){
			this.show = localStorage.city;
		}
	},
	methods:{
		toHome(cname){
			//当点击某个城市时，获取传递过来的城市名称
			//调用并传参被选中的城市名进行传递
			this.show = cname;
			this.changeCity(cname);
			//返回首页
			this.$router.push('/')
		},
		//激活mutations
		...mapMutations(['changeCity'])
	},
	//组件创建之后
	created(){
		let that = this;
		//向dataHome.json文件发起异步请求
		this.axios.get('/api/city.json').then( (res)=>{
			if(res.status == 200){
				let  data = res.data.data;
				that.hotCList = data.hotCities;
				that.cityLsit = data.city;
			}
		}).catch( (error)=>{
			console.log(error)
		} )
	}
}
	
</script>

<style scoped>
.city-list .default{
	background-color: #FED101;
	color: white;
} 
.ul1 p{
	height: 1rem;
	line-height: 1rem;
	color: gray;
	margin-left: 0.2rem;
}
.ul1 ul li{
	color: gray;
	text-align: center;
	line-height: 0.7rem;
	width: 1.5rem;
	height: 0.7rem;
	background-color: #e6e6e6;
	list-style: none;
	margin-left: 0.5rem;
	border-radius: 0.3rem;
}
.ul2{
	margin-top: 0.2rem;
	overflow: hidden;
	width: 100%;

}
.ul2 p{
	height: 1rem;
	line-height: 1rem;
	color: gray;
	margin-left: 0.2rem;
}
.ul3{
	width: 100%;
	overflow: hidden;
	margin-top: 0.2rem;
	border-top: 1px solid black;
}
.ul3 p{
	float: none;
	display: block;
	line-height: 1rem;
	height: 1rem;
	color: gray;
	margin-left: 0.2rem;
}
.ul2 ul li ,.ul3 ul li{
	float: left;
	color: gray;
	text-align: center;
	line-height: 0.7rem;
	width: 1.5rem;
	height: 0.7rem;
	background-color: #e6e6e6;
	list-style: none;
	margin-left: 0.45rem;
	border-radius: 0.3rem;
	margin-bottom: 0.2rem;
}
</style>
